<template>
	<div class="person-selection-container">
		<el-tabs v-model="tabsName" class="tabs" @tab-click="tabsChange">
			<el-tab-pane v-if="includeTabs.includes(PersonSelectionTabsEnum.orgTree)"
						 :label="translate('label.personCompTabsOrg')"
						 :name="PersonSelectionTabsEnum.orgTree"></el-tab-pane>
			<el-tab-pane v-if="includeTabs.includes(PersonSelectionTabsEnum.role)"
						 :label="translate('label.personCompTabsRole')"
						 :name="PersonSelectionTabsEnum.role"></el-tab-pane>
			<el-tab-pane v-if="includeTabs.includes(PersonSelectionTabsEnum.group)"
						 :label="translate('label.personCompTabsGroup')"
						 :name="PersonSelectionTabsEnum.group"></el-tab-pane>

			<!--插槽的tabs-->
			<el-tab-pane v-for="(item,index) in slotList" :label="slotTitle[index]" :key="item+index" :name="item">
			</el-tab-pane>
		</el-tabs>
		<el-row v-show="includeTabs.includes(tabsName)">
			<!--左侧-->
			<el-col :span="6" class="left">
				<p class="title">{{ '\u3000' }}</p><!--占位符-->
				<div class="border-row" v-base-loading="leftLoading">
					<!--按组织机构-->
					<div class="tree" v-if="includeTabs.includes(PersonSelectionTabsEnum.orgTree)"
						 v-show="tabsName===PersonSelectionTabsEnum.orgTree">
						<div class="top">
							<el-input v-model="searchTreeVal" class="search-input" @input="searchTree"
									  :placeholder="translate('label.personCompTreePlaceholder')">
								<template #prefix>
									<vab-icon icon="search-line"/>
								</template>
								<template #suffix>
									<vab-icon icon="close-circle-fill" v-show="searchTreeVal"
											  @click="clearOrgSearch('searchTreeVal')"/>
								</template>
							</el-input>
						</div>
						<div class="over-row">
							<!-- 组织机构树-->
							<el-tree ref="tree" v-base-loading="treeLoading" v-show="treeList && treeList.length > 0"
									 node-key="orgId"
									 highlight-current
									 lazy
									 :load="loadTree"
									 :data="treeList"
									 :props="treeLabelProps"
									 :check-strictly="true"
									 :expand-on-click-node="false"
									 :default-expanded-keys="defaultExpanded"
									 @node-click="clickTree">
								<span slot-scope="{ node, data }" class="tree-slot">
									<vab-icon icon="building-fill" v-if="data.type === OrgTypeEnum.company"/>
									<vab-icon icon="stack-fill" v-if="data.type === OrgTypeEnum.department"/>
									{{ data.code ? ('\u3010' + data.code + '\u3011' + data.name) : data.name }}
								</span>
							</el-tree>
							<!--无数据占位图-->
							<div class="empty-tips" v-show="!treeList || treeList.length === 0"><img
									:src="require('@/assets/com/image/empty-1.png')"/></div>
						</div>
					</div>
					<!--按角色-->
					<div clas="role" v-if="includeTabs.includes(PersonSelectionTabsEnum.role)"
						 v-show="tabsName===PersonSelectionTabsEnum.role">
						<div class="top">
							<el-input v-model="searchRoleVal" class="search-input" @input="searchRole"
									  :placeholder="translate('label.personCompTreePlaceholder')">
								<template #prefix>
									<vab-icon icon="search-line"/>
								</template>
								<template #suffix>
									<vab-icon icon="close-circle-fill" v-show="searchRoleVal"
											  @click="clearOrgSearch('searchRoleVal')"/>
								</template>
							</el-input>
						</div>
						<div class="over-row">
							<el-radio-group v-model="role" class="role-row" size="medium" @change="roleChange">
								<el-radio-button v-for="item in roleList" :label="item.tid" :key="item.tid">
									{{ item.name }}
								</el-radio-button>
							</el-radio-group>
							<!--无数据占位图-->
							<div class="empty-tips" v-show="!roleList || roleList.length === 0"><img
									:src="require('@/assets/com/image/empty-1.png')"/></div>
						</div>

					</div>
					<!--按用户组-->
					<div class="group" v-if="includeTabs.includes(PersonSelectionTabsEnum.group)"
						 v-show="tabsName===PersonSelectionTabsEnum.group">用户组
					</div>
				</div>
			</el-col>
			<!--中间主要数据列表-->
			<el-col :span="9" class="center">
				<p class="title">{{ '\u3000' }}</p><!--占位符-->
				<div class="border-row">
					<div class="top">
						<!--超出限制时按钮加提示-->
						<el-button type="primary" icon="iconfont icon-fuzhi1" plain
								   v-if="selectType===SelectionEnum.checkbox"
								   :disabled="disableAllButton"
								   :title="translate('label.personCompMaxTips')+checkedMax"
								   @click="getTableDataAll">
							{{ translate('label.personCompButtonAll') }}
						</el-button>
						<el-input v-model="tableParams.data.userName" class="search-input" @input="searchTable"
								  :placeholder="translate('label.personCompTablePlaceholder')">
							<template #prefix>
								<vab-icon icon="search-line"/>
							</template>
							<template #suffix>
								<vab-icon icon="close-circle-fill" v-show="tableParams.data.userName"
										  @click="clearTableSearch"/>
							</template>
						</el-input>
					</div>
					<!--表格-->
					<base-table :tools="false" row-key="refId" height="348px" class="alert-table"
								ref="mainTable"
								:loading="tableLoading"
								:data="tableData"
								:checked="checkedData"
								:option="tableOption"
								@select="getChecked" @pageChange="pageChange" @size-change="sizeChange"
								@sort-change="tableSort">
					</base-table>
				</div>
			</el-col>
			<!--已选的数据-->
			<el-col :span="9" class="right">
				<p class="title">
					{{ selectedTitle }}</p>
				<div class="border-row">
					<div class="top">
						<el-button type="danger" icon="el-icon-remove" plain v-if="selectType===SelectionEnum.checkbox"
								   @click="clearChecked">
							{{ translate('label.personCompButtonRemove') }}
						</el-button>
						<el-input v-model="searchCheckedVal" class="search-input" @input="searchChecked"
								  :placeholder="translate('label.personCompTablePlaceholder')">
							<template #prefix>
								<vab-icon icon="search-line"/>
							</template>
							<template #suffix>
								<vab-icon icon="close-circle-fill" v-show="searchCheckedVal"
										  @click="clearCheckedSearch('searchCheckedVal')"/>
							</template>
						</el-input>
					</div>
					<!--表格-->
					<base-table :tools="false" row-key="refId" height="348px" class="alert-table"
								:loading="checkedLoading"
								:data="checkedTableData"
								:option="checkTableOption"
								@pageChange="checkedPageChange" @size-change="checkedSizeChange"
								@sort-change="checkedTableSort">
						<template slot="table-slot-action" slot-scope="scope">
							<i class="table-remove-button el-icon-remove" @click="del(scope.row,scope.$index)"/>
						</template>
					</base-table>
				</div>
			</el-col>
		</el-row>

		<!--插槽主容器-->
		<div v-show="!includeTabs.includes(tabsName)" style="height:503px">
			<template v-for="(item,index) in slotList">
				<div v-show="tabsName === item" :key="item + index">
					<slot :name="item"></slot>
				</div>
			</template>
		</div>
		<div class="person-selection-footer">
			<el-button type="primary" plain @click="cancel">{{ translate('button.cancel') }}</el-button>
			<el-button type="primary" @click="sure">{{ translate('button.sure') }}</el-button>
		</div>
	</div>
</template>
<script lang="ts">
import {Component, Emit, Prop} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'
import BaseTable from '@/components-sys/base-table/base-table.vue'

import ResponseModel from "@/common/model/response.model";
import {EventEnum, PersonSelectionTabsEnum} from "./enums/person-selection.enum";
import PersonModel from "./model/person.model";
import BaseTableOptionModel from "@/components-sys/base-table/model/base-table-option.model";
import {AlignEnum, ColumnTypeEnum, FixedEnum, SelectionEnum} from "@/components-sys/base-table/enums/base-table.enum";
import {ElTree, TreeNode} from "element-ui/types/tree";
import PagesModel from "@/components-sys/pages/pages.model";
import PersonSelectionService from "./person-selection.service";

import {ORG_FIRST_PARENT_ID} from "./const/person-selection.const"
import {OrgTypeEnum} from '@/components-com/person-selection/enums/person-selection.enum';
import TreeModel from "./model/tree.model";
import RequestModel from "@/common/model/request.model";
import PersonRequestModel from "./model/person-request.model";
import tree from "element-ui/packages/table/src/store/tree";
import OrderModel from "../../common/model/order.model";
import RoleModel from "./model/role.model";

@Component({components: {BaseTable}})
export default class PersonSelection extends BaseVue {
	/*回显数据，可以是数组和url*/
	@Prop()
	private defaultChecked: string | PersonModel | PersonModel[];
	/*回显查询的参数*/
	@Prop(Object)
	private params;
	/*勾选方式，checkbox、radio*/
	@Prop(String)
	private selectType: SelectionEnum;
	/*最多选择数量*/
	@Prop(Number)
	private checkedMax;
	/*显示哪些默认的标签页*/
	@Prop({default: PersonSelectionTabsEnum})
	private includeTabs: PersonSelectionTabsEnum;

	/*插槽列表、标题*/
	private slotList: string[] = [];
	private slotTitle: string[] = [];
	/*标签name枚举*/
	private PersonSelectionTabsEnum = PersonSelectionTabsEnum;
	/*tabs标签*/
	private tabsName: PersonSelectionTabsEnum = PersonSelectionTabsEnum.orgTree;
	/*勾选方式*/
	private SelectionEnum = SelectionEnum;

	/*左侧loading*/
	private leftLoading = true;
	/*树加载loading*/
	private treeLoading = false;
	/*默认展开的树节点*/
	private defaultExpanded: number[] = [];
	/*树节点类型枚举*/
	private OrgTypeEnum = OrgTypeEnum;
	/*树节点配置对应的label*/
	private treeLabelProps = {isLeaf: 'isLeaf'};
	/*角色绑定的数据*/
	private role: RoleModel = new RoleModel();

	/*搜索框输入值*/
	private searchTreeVal = '';
	private searchCheckedVal = '';
	private searchRoleVal = '';

	/*左侧当前选中的树节点node、角色、用户组*/
	private currentTree: TreeModel = new TreeModel();
	private currentRoleTid: number;
	// private currentGroup

	/*存储左侧初始化的数据，用于重置搜索*/
	private treeList: TreeModel[] = [];
	private oldTreeList: TreeModel[] = [];

	/*角色列表*/
	private roleList: RoleModel[] = []
	private oldRoleList: RoleModel[] = []

	/*中间表格加载*/
	private tableLoading = false;
	/*已选表格加载*/
	private checkedLoading = false;

	/*查询中间表格参数*/
	private tableParams: RequestModel = new RequestModel<PersonRequestModel>();

	/*点击选中所有按钮查询的参数*/
	private allParams: RequestModel = new RequestModel<PersonRequestModel>();

	/*临时存储选中所有人，用于节流判断，切换其他部门或搜索条件改变时记得清空*/
	private allData: PersonModel[] = [];

	$refs: {
		tree: ElTree<any, any>,
		mainTable: BaseTable
	}

	/*表格配置*/
	private tableOption: BaseTableOptionModel = new BaseTableOptionModel();
	/*中间表格数据*/
	private tableData: ResponseModel = new ResponseModel<PersonModel>();
	/*已选表格配置*/
	private checkTableOption: BaseTableOptionModel = new BaseTableOptionModel();
	/*已选表格的数据*/
	private checkedTableData: ResponseModel = new ResponseModel<PersonModel>();
	/*已选数据，右侧表格的数据即为中间表格勾选的数据，此处为中间变量*/
	private checkedData: PersonModel | PersonModel[] = [];
	/*存储排序之前的旧数据，用于恢复前端排序*/
	private beforeSorData: PersonModel[] = [];

	/**
	 * 禁用最大选择数量时的全选按钮
	 */
	get disableAllButton() {
		return _.isArray(this.checkedData) && this.checkedData.length >= this.checkedMax;
	}

	/**
	 * 已选标题，返回字符串 “ 已选人员（125人）”
	 */
	get selectedTitle() {
		if (_.isArray(this.checkedData) && this.selectType === SelectionEnum.checkbox) {
			return this.translate('label.personCompCounts') + '\uff08' + this.checkedData.length + '\uff09'
		}
		return this.translate('label.personCompCounts') + '\uff08' + '1' + '\uff09'
	}

	/**
	 * 生命周期created
	 */
	private created() {
		/*配置表格的列*/
		this.tableOption.selection = this.selectType;
		let column = [
			//用户编号
			{label: 'label.personCompColumnCode', prop: 'userCode', width: 120, sortable: true,},
			//用户姓名
			{label: 'label.personCompColumnName', prop: 'userName', width: 120, sortable: true},
			//角色
			{label: 'label.personCompColumnRole', prop: 'roleName', width: 120, sortable: true},
			//任职性质
			{label: 'label.personCompColumnJob', prop: 'jobNatureName', width: 120, sortable: true},
			//部门
			{label: 'label.personCompColumnDept', prop: 'deptName', width: 150, sortable: true},
			//公司
			{label: 'label.personCompColumnCompany', prop: 'companyName', width: 250, sortable: true},
		]
		/*中间表格，前置一个空的列，用于固定勾选*/
		this.tableOption.column = [...column];
		this.tableOption.column.unshift({label: '', prop: '', width: 1, fixed: FixedEnum.left});
		/*已选表，后置一个操作插槽列*/
		this.checkTableOption.column = [...column];
		if (this.selectType === SelectionEnum.checkbox) {
			this.checkTableOption.column.push({
				label: this.translate('label.personCompColumnAction'),
				prop: 'action',
				width: 80,
				fixed: FixedEnum.right,
				type: ColumnTypeEnum.slot,
				align: AlignEnum.center
			})
		}

		/*初始化请求参数*/
		this.tableParams.pageSize = 10;
		this.tableParams.pageIndex = 1;
		this.tableParams.data = new PersonRequestModel();
		this.allParams.data = new PersonRequestModel();

		// 回显参数如果传入的是url，则查询回显用户
		if (_.isString(this.defaultChecked)) {
			this.getDefaultChecked();
		}
		// 回显参数如果传入的是传入了数组，则直接回显
		if(_.isObject(this.defaultChecked)){
			this.initCheckedTable(this.defaultChecked);
		}
	};

	/**
	 * 生命周期mounted
	 */
	private mounted() {
		// 获取插槽名称列表slot-name、标签名称
		this.slotList = Object.keys(this.$scopedSlots);
		this.slotTitle = Object.keys(this.$scopedSlots).map(item => {
			return this.$scopedSlots[item]()[0].data.attrs['slot-title'];
		})
	};

	/**
	 * 标签页切换
	 */
	@Emit()
	private tabsChange(): string {
		if (this.tabsName === PersonSelectionTabsEnum.role && this.roleList.length === 0) {
			this.getRoleList();
		}
		return this.tabsName;
	}

	/**
	 * 懒加载树节点
	 */
	private loadTree(node: TreeNode<any, any>, resolve: Function) {
		// 如果不需要组件内部提供的 选择方式，则不请求数据
		if (this.includeTabs.length === 0) {
			return
		}
		// 如果是第一级，ID从常量取，否则为每一级的父级ID
		let orgId = ORG_FIRST_PARENT_ID;
		if (node.level > 0) {
			orgId = node.data.orgId;
		}
		PersonSelectionService.findOrganization(orgId).then(res => {
			if (res.status === 200) {
				// 判断是否有子节点还可展开
				res.data = this.setIsLeaf(res.data);
				// 第一级处理，设置默认显示第一个数据
				if (res.data.length > 0 && node.level === 0) {
					this.treeList = res.data;
					// 复制一份树数据，用于还原搜索前的数据，避免再次请求
					this.oldTreeList = _.cloneDeep(res.data);
					// 初始查询第一级人员列表
					this.tableParams.data.deptId = res.data[0].orgId;
					this.getTableDataByPage();
					// 设置当前树节点数据
					this.currentTree = res.data[0];
					// 展开树
					this.$nextTick(() => {
						this.$refs.tree.setCurrentKey(res.data[0]);
						this.defaultExpanded = [res.data[0].orgId];
						this.allParams.data.deptId = res.data[0].orgId;
					});
				}
				resolve(res.data);
			} else {
				resolve([]);
			}
		}).catch(() => {
			resolve([]);
		}).finally(() => {
			this.leftLoading = false;
		});
	};

	/**
	 * 搜索树节点（远程）
	 */
	private searchTree() {
		// 如果没有输入内容返回旧数据
		if (!this.searchTreeVal) {
			this.treeList = this.oldTreeList;
			return;
		}
		this.treeLoading = tree;
		PersonSelectionService.searchOrganization(this.searchTreeVal).then(res => {
			if (res.status === 200) {
				// 判断是否有子节点还可展开
				this.treeList = this.setIsLeaf(res.data)
			}
		}).finally(() => {
			this.treeLoading = false;
		});
	}

	/**
	 * 判断是否有子节点还可展开
	 */
	private setIsLeaf(data: TreeModel[]): TreeModel[] {
		data = data?.organizationVOList || [];
		return data.map(item => {
			if (!item.childrenCount) {
				item['isLeaf'] = true;
			}
			return item
		})
	}

	/**
	 * 获取角色列表
	 */
	private getRoleList() {
		this.leftLoading = true;
		PersonSelectionService.findAllRole().then(res => {
			if (res.status === 200) {
				this.oldRoleList = _.cloneDeep(res.data) || [];
				this.roleList = res.data || [];
			}
		}).finally(() => {
			this.leftLoading = false;
		})
	}

	/**
	 * 搜索角色
	 */
	private searchRole() {
		if (this.searchRoleVal) {
			this.roleList = this.oldRoleList.filter(item => {
				return (item.code.includes(this.searchRoleVal) || item.name.includes(this.searchRoleVal))
			})
		} else {
			this.roleList = _.cloneDeep(this.oldRoleList);
		}
	}

	/**
	 * 中间表格搜索（远程）
	 */
	private searchTable() {
		this.tableParams.pageIndex = 1;
		this.getTableDataByPage()
	}

	/**
	 * 右侧已选表格搜索（本地）
	 */
	private searchChecked() {
		this.checkedTableData.data = _.isArray(this.checkedData) && this.checkedData.filter(item => {
			return (item.userCode.includes(this.searchCheckedVal) || item.userName.includes(this.searchCheckedVal))
		})
	}

	/**
	 * 点击树节点
	 */
	private clickTree(val: TreeModel) {
		if (!this.currentTree || val.orgId !== this.currentTree.orgId) {
			this.currentTree = val;
			this.role = null;
			this.tableParams.data = {deptId: val.orgId};
			this.allParams.data = {deptId: val.orgId};
			this.allData = [];
			this.getTableDataByPage();
		}
	};

	/**
	 * 点击角色
	 */
	private roleChange(tid: number) {
		if (tid !== this.currentRoleTid) {
			this.currentRoleTid = tid;
			this.$refs.tree.setCurrentKey(null);
			this.currentTree = null;
			this.tableParams.data = {roleId: tid};
			this.allParams.data = {roleId: tid};
			this.allData = [];
			this.getTableDataByPage();
		}
	}

	/**
	 * 中间表格获取数据（分页查询）
	 */
	private getTableDataByPage() {
		this.tableLoading = true;
		PersonSelectionService.findUserListByPage(this.tableParams).then(res => {
			if (res.status === 200) {
				res.data = res.data || [];
				this.tableData = res;
			}
		}).finally(() => {
			this.tableLoading = false;
		})
	}

	/**
	 * 点击选所有数据（不分页查询）
	 */
	private getTableDataAll() {
		// 如果数据未有变化，禁止发送请求
		if (this.allData.length > 0 || this.checkedLoading) {
			this.initCheckedTable(this.allData);
			return
		}
		this.checkedLoading = true;
		this.tableLoading = true;
		PersonSelectionService.findAllUserList(this.allParams).then(res => {
			if (res.status === 200) {
				// 全选初始化右侧表格数据，手动分页、数据合并
				this.initCheckedTable(res.data, true);
				// 新赋值要手动更新表格
				this.$refs.mainTable.updateChecked();
			}
		}).finally(() => {
			this.checkedLoading = false;
			this.tableLoading = false;
		})
	}

	/**
	 * 回显查询所有已选，传入接口地址
	 */
	private getDefaultChecked() {
		this.checkedLoading = true;
		this.tableLoading = true;
		let params: RequestModel = new RequestModel();
		Object.assign(params, this.params);
		PersonSelectionService.findCheckedUserList(this.defaultChecked as string, params).then(res => {
			if (res.status === 200) {
				this.initCheckedTable(res.data);
			}
		}).finally(() => {
			this.checkedLoading = false;
			this.tableLoading = false;
		})
	}

	/**
	 * 全选初始化右侧勾选表格，手动分页、合并数据等
	 */
	private initCheckedTable(data: PersonModel | PersonModel[], handle?: boolean, orderBy?: OrderModel) {
		// 如果是单选则返回
		if (this.selectType === SelectionEnum.radio) {
			this.checkedData = data;
			this.checkedTableData.data = [data];
			return
		}

		this.tableLoading = true;
		this.checkedLoading = true;
		// 如果设置了最大限制，则截取数据
		if (this.checkedMax && _.isArray(data) && data.length > this.checkedMax) {
			data = data.slice(0, this.checkedMax)
		}
		// 拷贝当前条件查询的所有结果
		if (handle) {
			this.allData = _.cloneDeep(data) as PersonModel[]
		}
		// 合并数据
		this.checkedData = [...this.checkedData, ...data];
		// 去重
		this.checkedData = _.unionBy(this.checkedData, 'refId') as PersonModel[];
		// 排序
		if (orderBy) {
			this.beforeSorData = _.cloneDeep(this.checkedData);
			this.checkedData = _.orderBy(this.checkedData, orderBy.field, orderBy.mode) as PersonModel[];
		}
		// 恢复默认排序
		if (orderBy === null && this.beforeSorData.length) {
			this.checkedData = _.cloneDeep(this.beforeSorData);
		}
		this.checkedTableData.totalRows = this.checkedData.length;
		this.checkedTableData.data = this.getPageData();

		// 加个时间loading，使其看上去有交互
		setTimeout(() => {
			this.tableLoading = false;
			this.checkedLoading = false;
		}, 150)
	}

	/**
	 * 中间表格排序事件
	 */
	private tableSort(val: OrderModel) {
		this.tableParams.orderBy = [val];
		this.getTableDataByPage();
	}

	/**
	 * 右侧表格排序事件
	 */
	private checkedTableSort(val: OrderModel) {
		this.initCheckedTable([], false, val);
	}

	/**
	 * 表格勾选返回数据
	 */
	private getChecked(list: PersonModel | PersonModel[]) {
		// 多选返回数组
		if (this.selectType === SelectionEnum.checkbox) {
			this.checkedData = list as PersonModel[];
			this.checkedTableData.data = _.cloneDeep(list);
			this.checkedTableData.totalRows = this.checkedData.length;
		}
		// 单选返回对象
		if (this.selectType === SelectionEnum.radio) {
			this.checkedData = list as PersonModel;
			this.checkedTableData.data = [list];
			this.checkedTableData.totalRows = 1;
		}
	};

	/**
	 * 单个移除
	 */
	private del(row: PersonModel) {
		// 右侧表格删除数据
		this.checkedTableData.data.forEach((item, index) => {
			if (row.refId === item.refId) {
				this.checkedTableData.data.splice(index, 1)
			}
		});

		// 单选直接清空
		if (this.selectType === SelectionEnum.radio) {
			this.checkedData = null;
			return
		}
		// 多选从数组删除
		if (_.isArray(this.checkedData) && this.selectType === SelectionEnum.checkbox) {
			this.checkedData.forEach((item, index) => {
				if (_.isArray(this.checkedData) && row.refId === item.refId) {
					this.checkedData.splice(index, 1)
				}
			});
			this.checkedTableData.totalRows = this.checkedData.length;
			// 如果一页移除完、或者移除只够一页条数，则重新计算页数
			if (this.checkedTableData.data.length === 0) {
				this.checkedTableData.pageIndex--;
				this.checkedTableData.data = this.getPageData();
			}
			if (this.checkedData.length === this.checkedTableData.pageSize) {
				this.checkedTableData.pageIndex = 1
				this.checkedTableData.data = this.getPageData();
			}
			// 移除后要手动更新表格
			this.$refs.mainTable.updateChecked();
		}
	}

	/**
	 * 移除所有已选
	 */
	private clearChecked() {
		this.checkedData = [];
		this.checkedTableData.data = [];
		this.checkedTableData.totalRows = 0;
		this.checkedTableData.pageIndex = 1;
		// 移除后要手动更新表格
		this.$refs.mainTable.updateChecked();
	}

	/**
	 * 清除左侧输入框
	 */
	private clearOrgSearch(key: string) {
		// 清除对应的变量
		this[key] = '';
		// 还原搜索前的数据
		if (this.tabsName === PersonSelectionTabsEnum.orgTree) {
			this.treeList = _.cloneDeep(this.oldTreeList);
		}
		if (this.tabsName === PersonSelectionTabsEnum.role) {
			this.roleList = _.cloneDeep(this.oldRoleList);
		}
	}

	/**
	 * 清除中间表格的输入框
	 */
	private clearTableSearch() {
		this.tableParams.pageIndex = 1;
		delete this.tableParams.data.userName;
		this.getTableDataByPage();
	}

	/**
	 * 清除右侧表格的输入框
	 */
	private clearCheckedSearch() {
		this.searchCheckedVal = '';
		this.checkedTableData.pageIndex = 1;
		this.checkedTableData.data = this.getPageData();
	}

	/**
	 * 中间表格每页条数切换
	 */
	private sizeChange(val: PagesModel) {
		this.tableParams.pageSize = val.pageSize;
		this.getTableDataByPage();
	}

	/**
	 * 中间表格翻页
	 */
	private pageChange(val: PagesModel) {
		this.tableParams.pageIndex = val.pageIndex;
		this.getTableDataByPage();
	}

	/**
	 * 已选表格每页条数切换
	 */
	private checkedSizeChange(val: PagesModel) {
		this.checkedTableData.data = this.getPageData(val.pageIndex, val.pageSize);
	}

	/**
	 * 已选表格翻页
	 */
	private checkedPageChange(val: PagesModel) {
		this.checkedTableData.data = this.getPageData(val.pageIndex, val.pageSize);
	}

	/**
	 * 前端分页方法
	 */
	private getPageData(pageIndex?: number, pageSize?: number): PersonModel[] {
		if (_.isArray(this.checkedData)) {
			this.checkedTableData.pageIndex = pageIndex || this.checkedTableData.pageIndex || 1;
			this.checkedTableData.pageSize = pageSize || this.checkedTableData.pageSize || 10;
			let index1 = (this.checkedTableData.pageIndex - 1) * this.checkedTableData.pageSize;
			let index2 = this.checkedTableData.pageIndex * this.checkedTableData.pageSize;
			return this.checkedData.slice(index1, index2)
		}
	}

	/**
	 * 确定返回事件
	 */
	private sure() {
		// 如果切到插槽，则只返回当前标签页的name
		if (!this.includeTabs.includes(this.tabsName)) {
			return this.$emit(EventEnum.sure, this.tabsName);
		}
		// 否则返回组件内的数据
		if (this.checkedMax && _.isArray(this.checkedData) && this.checkedData.length > this.checkedMax) {
			this.$message.warning(this.translate('label.personCompMaxTips') + this.checkedMax);
			return
		} else {
			return this.$emit(EventEnum.sure, this.checkedData);
		}
	}

	/**
	 * 确定返回事件
	 */
	@Emit()
	private cancel() {
	}

};
</script>
<style lang="scss" scoped>
.person-selection-container {
	::v-deep.el-table th {
		height: 40px;
	}

	/*表格删除按钮*/
	.table-remove-button {
		color: $base-color-red;
		cursor: pointer;
		font-size: 18px
	}

	/*搜索框（通用）*/
	.top {
		display: flex;
		margin-bottom: 18px;

		button {
			height: 40px;
			width: 140px;
			margin-right: 10px;

			::v-deep i {
				margin-right: 5px;
				font-size: 16px;
			}

			::v-deep i + span {
				margin: 0
			}
		}

		.search-input {
			::v-deep.el-input__inner {
				height: 40px;
				padding-left: 66px;
				border-radius: 6px;
				border-color: $base-button-default;
				text-indent: 0;
			}

			::v-deep.el-input__prefix {
				left: 0;
				width: 54px;
				line-height: 40px;
				color: #fff;
				border-radius: 6px 0 0 6px;
				background: $base-button-default;

				i {
					font-size: 18px;
				}
			}

			::v-deep.el-input__suffix {
				cursor: pointer;
				line-height: 40px;

				i {
					font-size: 18px;
				}
			}
		}
	}

	.el-col {
		p.title {
			margin-top: 0
		}

		.border-row {
			padding: 20px;
			padding-bottom: 0;
			height: 490px;
			box-sizing: border-box;
			overflow: auto;
			position: relative;
		}

		&.left {
			.border-row {
				border: 1px solid $base-border-color;
				border-right: none;
				border-radius: 6px 0 0 6px;
			}

			.over-row {
				margin: 0 -20px;
				padding: 0 20px;
				overflow: auto;
				height: 410px;
				position: relative;
			}

			.el-tree {
				min-width: 320px;
			}

			/*左侧角色列表*/
			.role-row, .el-radio-button, ::v-deep.el-radio-button__inner {
				display: block;
				width: 100%;
			}

			.role-row {
				.el-radio-button {
					margin-bottom: 10px;

					::v-deep.el-radio-button__inner {
						border: none;
						background: $base-color-background;
						text-align: left;
						border-radius: 6px;
						padding: 11px 20px;
						font-size: 15px;
					}
				}

				.el-radio-button.is-active {
					::v-deep.el-radio-button__inner {
						background: $base-button-default;
					}
				}
			}

			/*空占位*/
			.empty-tips {
				text-align: center;
				position: absolute;
				right: 0;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		&.center {
			.border-row {
				border: 1px solid $base-border-color;
				border-radius: 0 6px 6px 0;
			}
		}

		&.right {
			padding-left: 20px;

			.border-row {
				border: 1px solid $base-border-color;
				border-radius: 6px;
			}
		}
	}
}

.alert-table {
	::v-deep.base-page.el-pagination {
		border: none;
		background: none
	}
}

/*底部按钮*/
.person-selection-footer {
	text-align: right;
	padding: 20px 40px;
	margin: 40px -40px -30px;
	box-shadow: 0 0 10px 2px $base-color-grayE;
}

/*标签页tabs*/
.tabs {
	::v-deep.el-tabs__header {
		margin: 0;

		.el-tabs__item {
			font-size: 16px;
			line-height: 1;
			height: 30px;
			color: $base-color-orange;
		}

		.el-tabs__item:not(.is-active) {
			color: $base-color-gray3
		}

		.el-tabs__nav-wrap::after {
			display: none
		}

		.el-tabs__active-bar {
			height: 3px;
			background: $base-color-orange
		}
	}
}

</style>
